<template>
  <div class="content">
    <dc-header :page-to="'/home'" :title="'菜品分析'" :rightIcon="''"></dc-header>
    <div class="head-top">
      <dc-date @getTabBarDatep="getDate" :startTime="this.curDate.startTime" :startDateType="this.curDate.type"></dc-date>
    </div>
    <div class="common-card mt20 bg-white">
      <dc-cell title="明星菜品" class="main-title"></dc-cell>
      <div class="dish-wrapper flex">
        <div class="text-left aln-center flex p10">
          <img class="dish-img mr30 ml30" alt=""
               src="static/icon-default-dish.png"/>
          <div class="dish-title">
            <div class="name">
              {{popularDish.dishName}}
              <span class="num">销量{{popularDish.sellNum}}份</span>
            </div>
          </div>
        </div>
        <div class="aln-center flex text-right">
          <img class="mr20" alt="" width="40" height="40"
               src="../../../assets/dish_crown.png"/>
          <span class="b f32">销量冠军</span>
        </div>
      </div>
      <div class="dish-wrapper flex">
        <div class="text-left aln-center flex p10">
          <img class="dish-img mr30 ml30" alt=""
               src="static/icon-default-dish.png"/>
          <div class="dish-title">
            <div class="name">
              {{ProfitableDish.dishName}}
              <span class="num">销售额{{ProfitableDish.dishAmount}}元</span>
            </div>
          </div>
        </div>
        <div class="aln-center flex text-right">
          <img class="mr20" alt="" width="40" height="40"
               src="../../../assets/dish_crown.png"/>
          <span class="b f32">销售额冠军</span>
        </div>
      </div>
    </div>
    <div class="common-card mt20">
      <dc-cell title="菜品销售额分布" class="main-title"></dc-cell>
      <div class="common-chart mix1px" id="dishPie"></div>
      <router-link class="more bg-white" to="itemRank">查看更多</router-link>
    </div>
    <div class="common-card mt20">
      <dc-cell title="菜类销售额分布" class="main-title"></dc-cell>
      <div class="common-chart mix1px" id="catePie"></div>
      <router-link class="more bg-white" to="itemClassRank">查看更多</router-link>
    </div>
  </div>
</template>

<script>
  import header from '@/components/header';
  import {col, row} from '@/components/Flex';
  import cell from '@/components/cell';
  import date from '@/components/datetabbar/all';
  import {initPie} from '@/common/echarts/pie';
  import api from '@/common/api/dishAnalysis';
  import {mapActions, mapGetters} from 'vuex';
  export default {
    components: {
      'dc-header': header,
      'dc-date': date,
      'dc-cell': cell,
      'dc-col': col,
      'dc-row': row
    },
    data () {
      return {
        popularDish: {},
        ProfitableDish: {},
        itemData: [],
        itemName: [],
        classData: [],
        className: [],
        dishPie: null,
        catePie: null,
        currentDate: ''
      };
    },
    mounted () {
      this.dishPie = initPie('#dishPie');
      this.catePie = initPie('#catePie');
      this.dataInit();
    },
    activated () {
      if (this.curDate) {
        this.currentDate = {
          type: this.curDate.type,  //时间范围标识，1-日；2-周；3-月；4-年
          startTime: this.curDate.startTime
        };
      }
      this.dataInit();
    },
    computed: {
      ...mapGetters(['curDate'])
    },
    methods: {
      ...mapActions({saveDate: 'saveDate', clearDate: 'clearDate'}),
      getDate (date) {
        this.dataInit();
        if (date) {
          this.saveDate(date);
          this.currentDate = date;
          this.buildChart();
        }
      },
      //数据初始化
      dataInit () {
        this.popularDish = {sellNum: 0, dishName: '无'};
        this.ProfitableDish = {dishAmount: 0, dishName: '无'};
        this.itemData = [{value: 0, name: '暂无数据'}];
        this.itemName = ['暂无数据'];
        this.classData = [{value: 0, name: '暂无数据'}];
        this.className = ['暂无数据'];
        this.initDishPie();
        this.initCatePie();
      },
      buildChart () {
        let data = {
          timeFlag: this.currentDate.type,
          beginTime: this.currentDate.startTime,
          endTime: this.currentDate.endTime
        };
        this._getFoodPopular(data);
        this._getFoodProfitable(data);
        this._getFoodItemSales(data);
        this._getFoodClassSales(data);
      },
      _getFoodPopular (data) {  //获取销量冠军菜品
        api.getFoodPopular(data)
          .then(res => {
            if (res && res.dishName) {
              this.popularDish = res;
            }
          });
      },
      _getFoodProfitable (data) {  //获取最能盈利菜品菜品
        api.getFoodProfitable(data)
          .then(res => {
            if (res && res.dishName) {
              this.ProfitableDish = res;
            }
          });
      },
      _getFoodItemSales (data) {  //获取菜品销售分布
        api.getFoodItemSales(data)
          .then(res => {
            if (res && res.length > 0) {
              this.itemData = [];
              this.itemName = [];
              let self = this;
              res.forEach((item) => {
                self.itemData.push({value: item.itemSales, name: item.itemName});
                self.itemName.push(item.itemName);
              });
              this.initDishPie();
            }
          });
      },
      _getFoodClassSales (data) {  //获取菜类销售分布
        api.getFoodClassSales(data)
          .then(res => {
            if (res && res.length > 0) {
              this.classData = [];
              this.className = [];
              let self = this;
              res.forEach((item) => {
                self.classData.push({value: item.dishCategorySales, name: item.dishCategoryName});
                self.className.push(item.dishCategoryName);
              });
              this.initCatePie();
            }
          });
      },
      //菜品销售额分布
      initDishPie () {
        this.dishPie.hideLoading();
        this.dishPie.setOption({
          legend: {
            show: true,
            orient: 'horizontal',
            data: this.itemName,
            x: 'center',
            y: 'bottom'
          },
          series: [{
            // 根据名字对应到相应的系列
            name: '',
            type: 'pie',
            radius: '45%',
            center: ['50%', '40%'],
            label: {
              normal: {
                formatter: '{d}%'
              }
            },
            data: this.itemData
          }]
        });
      },
      //菜类销售额分布
      initCatePie () {
        this.catePie.hideLoading();
        this.catePie.setOption({
          legend: {
            show: true,
            orient: 'horizontal',
            data: this.className,
            x: 'center',
            y: 'bottom'
          },
          series: [{
            // 根据名字对应到相应的系列
            name: '',
            type: 'pie',
            radius: '45%',
            center: ['50%', '40%'],
            label: {
              normal: {
                formatter: '{d}%'
              }
            },
            data: this.classData
          }]
        });
      }
    },
    beforeRouteLeave (to, from, next) {
      // 返回home页后清空日期缓存
      if (to.path === '/home') {
        this.clearDate();
      }
      next();
    }
  };
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/variable";
  .flex {
    display: flex;
  }
  #dishPie, #catePie {
    min-height: 400px;
  }

  .text-left {
    text-align: left;
    flex: 6;
  }

  .text-right {
    flex: 4;
  }

  .dish-wrapper {
    justify-content: space-around;
  }

  .dish-img {
    width: px2rem(140px);
    height: px2rem(140px);
  }

  .dish-title {
    display: table;
    .name {
      display: table-cell;
      vertical-align: middle;
      font-size: px2rem(24px);
      color: #666;
      .num {
        display: block;
        font-size: px2rem(30px);
        font-weight: bold;
        margin-top: px2rem(15px);
        color: #333;
      }
    }
  }

  .aln-center {
    align-items: center;
  }

  .b {
    font-weight: bold;
  }

  .f32 {
    font-size: px2rem(32px);
  }

  .more {
    text-align: center;
    line-height: px2rem(90px);
    font-size: px2rem(30px);
    color: #999;
    display: block;
  }
</style>
